<template>
  <div>
    <div id="all_relation" :style="{ 'width': width + 'px', 'height': height + 'px' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'View2d',
  props: ['rela', 'width', 'height', 'types'],
  data() {
    return {
      myChart: null,
      option: null,
      relations: null
    }
  },
  mounted() {
    // console.log(this.rela);
    this.relations = this.rela
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      this.myChart = echarts.init(document.getElementById("all_relation"));
      this.option = {
        // backgroundColor: "white",
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        legend: {
          x: "center",
          show: true,
          data: this.types
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            symbolSize: 45,
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 4],
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10
                },
                formatter: "{c}"
              }
            },
            force: {
              repulsion: 2500,
              edgeLength: [10, 100]
            },
            focusNodeAdjacency: true,
            draggable: true,
            roam: true,
            categories: [
              {
                name: this.types[0],
              },
              {
                name: this.types[1],

              }, {
                name: this.types[2],
              },
              {
                name: this.types[3],
              }
            ],
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
              }
            },
            force: {
              repulsion: 1000
            },
            tooltip: {
              formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
                if (!node.value) {
                  return node.data.name;
                } else {
                  return node.data.name + ":" + node.data.showNum;
                }
              },
            },
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0.3
              }
            },
            // progressiveThreshold: 700,
            nodes: this.relations.data.map(function (node, idx) {
              node.id = idx;
              return node;
            }),
            links: this.relations.links,
          }
        ]
      };
      this.myChart.setOption(this.option, true);
    },
    refresh(relation) {
      this.option.series[0].nodes = relation.data.map((node, idx) => {
        node.id = idx;
        return node;
      })
      this.option.series[0].links = relation.links
      this.myChart.setOption(this.option, true);
    }
  },
}
</script>

<style scoped>

</style>

